{extend name="common/base" /}
{block name="body"} 
<div class="Content" id="content">
    <div class="container">
        <form class="layui-form search-form SearchCom" lay-filter="searchForm">
            <a lay-on="addNotice" class="layui-btn layui-btn-normal">
                <i class="layui-icon layui-icon-add-circle"></i>添加公告
            </a>
        </form>
        <table class="layui-hide" id="noticeTable" lay-filter="noticeTable"></table>
    </div>
</div>

<script type="text/html" id="operateTpl">
    <div class="foot">
        <a class="btn-delete" lay-event="delete">删除</a>
    </div>
</script>

<script type="text/html" id="contentTpl">
    <div style="padding: 10px; word-break: break-all;">{{ d.content }}</div>
</script>

{/block}

{block name="js"} 
<script>
    changeTitleName('店铺公告');
    
    layui.use(['table', 'layer', 'form', 'util'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var util = layui.util;
        var $ = layui.$;

        // 渲染表格
        table.render({
            elem: '#noticeTable',
            url: "/merchant/get_store_notice", // 数据接口
            cols: [[
                { field: 'content', title: '内容', templet: '#contentTpl', minWidth: 300 },
                { field: 'create_time', title: '发布时间', width: 180, sort: true },
                { 
                    title: '操作',
                    toolbar: '#operateTpl', 
                    width: 100,
                    align: 'center'
                }
            ]],
            page: true,
            limit: 10,
            limits: [10, 20, 30],
            text: {
                none: '暂无公告数据'
            }
        });
        util.on({
                //点击跳转url
                addNotice: function () {
                    layer.open({
                        type: 1,
                        title: '添加公告',
                        content: '<div style="padding: 20px;">' +
                                '<textarea id="noticeContent" placeholder="请输入公告内容" style="width: 100%; height: 150px; padding: 10px;" class="layui-textarea"></textarea>' +
                                '</div>',
                        area: ['600px', '300px'],
                        btn: ['确定', '取消'],
                        btnAlign: 'c',
                        yes: function(index, layero) {
                            var content = $('#noticeContent').val().trim();
                            if (!content) {
                                layer.msg('请输入公告内容', {icon: 2});
                                return;
                            }
                            
                            // 显示加载中
                            var loadIndex = layer.load(2);
                            
                            // 提交到后台
                            $.ajax({
                                url: '/merchant/add_store_notice',
                                type: 'POST',
                                data: {content: content},
                                dataType: 'json',
                                success: function(res) {
                                    layer.close(loadIndex);
                                    if (res.code == 200) {
                                        layer.msg('添加成功', {icon: 1});
                                        table.reload('noticeTable'); // 刷新表格
                                        layer.close(index); // 关闭弹窗
                                    } else {
                                        layer.msg(res.msg || '添加失败', {icon: 2});
                                    }
                                },
                                error: function() {
                                    layer.close(loadIndex);
                                    layer.msg('网络错误，请稍后再试', {icon: 2});
                                }
                            });
                        }
                    });
                },


            })
     

        // 监听表格工具事件
        table.on('tool(noticeTable)', function (obj) {
            var data = obj.data;

            switch (obj.event) {
                case 'delete':
                    layer.confirm('确定要删除这条公告吗？', {
                        title: '提示',
                        icon: 3,
                        btn: ['确定', '取消'],
                    }, function(index) {
                        // 显示加载中
                        var loadIndex = layer.load(2);
                        
                        // 提交删除请求
                        $.ajax({
                            url: '/merchant/delete_store_notice',
                            type: 'POST',
                            data: {id: data.id},
                            dataType: 'json',
                            success: function(res) {
                                layer.close(loadIndex);
                                if (res.code == 200) {
                                    layer.msg('删除成功', {icon: 1});
                                    table.reload('noticeTable'); // 刷新表格
                                } else {
                                    layer.msg(res.msg || '删除失败', {icon: 2});
                                }
                            },
                            error: function() {
                                layer.close(loadIndex);
                                layer.msg('网络错误，请稍后再试', {icon: 2});
                            }
                        });
                        
                        layer.close(index);
                    });
                    break;
            }
        });
    });
</script>
{/block}

{block name="css"}
<style>
    .btn-delete {
        color: #FF5722;
    }
    .btn-delete:hover {
        color: #ff0000;
    }
    .foot {
        text-align: center;
    }
    .layui-table-cell {
        height: auto;
        white-space: normal;
    }
</style>
{/block}